<template>
  <div class="page">
    <m-header></m-header>
    <tab></tab>
    <div class="search_box_wrapper">
      <div class="search_box">
        <i class="icon-search"></i>
        <input type="text" placeholder="搜索歌曲，歌手" class="search_input">
        <i class="icon-dismiss"></i>
      </div>
    </div>
    <div class="short_cut_wrapper">
      <div class="hot_key">
        <h1 class="search_title">熱門搜索</h1>
        <ul class="search_content">
          <li class="search_item">
            <span>說愛你</span>
          </li>
          <li class="search_item">
            <span>青花瓷</span>
          </li>
          <li class="search_item">
            <span>紅塵客棧</span>
          </li>
          <li class="search_item">
            <span>春江花月夜</span>
          </li>
          <li class="search_item">
            <span>繁花</span>
          </li>
          <li class="search_item">
            <span>see you again</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header'
import tab from 'components/tab/tab'
export default {
  data () {
    return {}
  },
  components: {
    MHeader,
    tab
  }
}
</script>
<style lang="less">
  .search_box_wrapper {
    margin: 20px;
    box-sizing: border-box;
    .search_box {
      width: 100%;
      padding: 0 6px;
      height: 40px;
      background: #333;
      border-radius: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      .icon-search {
        color: #222;
        font-size: 24px;
      }
      .search_input {
        background: #333;
        margin: 0 5px;
        line-height: 18px;
        color: #fff;
        flex: 1;
      }
      .icon-dismiss{
        font-size: 16px;
        color: #222;
      }
    }
  }
  .short_cut_wrapper {
    height: 100%;
    overflow: hidden;
    .hot_key {
      padding: 0 20px 20px 20px;
      box-sizing: border-box;
      width: 100%;
      font-size: 14px;
      .search_title {
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 20px;
      }
      .search_item {
        display: inline-block;
        vertical-align: middle;
        padding: 5px 10px;
        border-radius: 6px;
        margin: 0 20px 10px 0;
        color: rgba(255, 255, 255, 0.3);
        background: #333;
      }
    }
  }
</style>
